<template>
    <el-dialog class="update-password" :title="title" :visible.sync="dialogFormVisible" width="500px">
        <el-form :model="form" :label-position="labelPosition" size="small" :rules="rules" ref="formRef">
            <el-form-item prop="pwd">
                <span slot="label">旧密码</span>
                <el-input autocomplete="off" v-model='form.oldpassword' placeholder="请输入旧密码"></el-input>
            </el-form-item>

            <el-form-item prop="new_pwd">
                <span slot="label">新密码</span>
                <el-input autocomplete="off" v-model='form.newpassword' placeholder="请输入新密码"></el-input>
            </el-form-item>

            <el-form-item prop="new_pwd_ok">
                <span slot="label">确认新密码</span>
                <el-input autocomplete="off" v-model='form.password2' placeholder="确认新密码"></el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="submits" size="small">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
                dialogFormVisible: false,
                labelPosition: 'top',
                title: '修改密码',
                form: {
                    oldpassword: '',
                    newpassword: '',
                    password2: '',
                },
                rules: {
                    oldpassword: [{
                        required: true,
                        message: '请输入旧密码',
                        trigger: 'blur'
                    }],
                    newpassword: [{
                        required: true,
                        message: '请输入新密码',
                        trigger: 'blur'
                    }],
                    password2: [{
                        required: true,
                        message: '请输入确认密码',
                        trigger: 'blur'
                    }]
                }
            };
        },
        methods: {
            init() {
                this.dialogFormVisible = true;
                this.form.oldpassword = '';
                this.form.newpassword = '';
                this.form.password2 = '';
            },
            submits() {
                if (this.form.newpassword !== this.form.password2) {
                    this.$message({
                        type: 'error',
                        message: '密码不一致'
                    })
                    return;
                }

                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        this.axios.put('users/changepwd', this.form).then(response => {
                          //  console.log(response)
                          if(response.code==1){
                                this.$message({
                                    type: 'success',
                                    message: "修改密码成功"
                                })

                                setTimeout(() => {
                                    sessionStorage.clear(); // 把所有的缓存都删除
                                    this.$store.commit('setToken', '');
                                    this.$store.commit('menu/setMenu', []);
                                    this.$router.replace({
                                        path: "/login"
                                    });
                                }, 1500)
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: response.msg
                                })
                            } 
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .update-password {
        .el-dialog__body {
            padding-top: 0 !important;
        }

        .el-form-item {
            margin-bottom: 5px !important;
        }

        .el-form--label-top .el-form-item__label {
            padding-bottom: 0 !important;
        }
    }
</style>
